<template>
  <div>
    <section class="sys-table-action">
      <div>
        <el-button type="primary" @click="addClassify"
          ><el-icon><Plus /></el-icon>新增</el-button
        >
      </div>
      <div>
        <el-tooltip
          class="box-item"
          effect="dark"
          :content="`${showSearch ? '隐藏' : '显示'}搜索`"
          placement="top"
        >
          <el-button circle plain @click="showSearch = !showSearch">
            <el-icon><Search /></el-icon>
          </el-button>
        </el-tooltip>

        <el-tooltip
          class="box-item"
          effect="dark"
          content="刷新表格"
          placement="top"
        >
          <el-button circle plain @click="init">
            <el-icon><RefreshRight /></el-icon>
          </el-button>
        </el-tooltip>
      </div>
    </section>

    <!-- <ClassDialog
        :dialogVisible="dialogVisible"
        :closeLog="closeLog"
        :title="dialogVisibleTitle"
        :onSubmitLog="onSubmit"
        :parentId="parentId"
        :formDate="form"
      /> -->
    <el-table :data="tableData" row-key="id" stripe border>
      <el-table-column
        prop="name"
        label="分类名称"
        align="left"
      ></el-table-column>
      <el-table-column prop="thumbnail" align="center" width="170">
        <template #default="{ row }">
          <img class="classifyImg" :src="row.thumbnail" alt="" />
        </template>
      </el-table-column>
      <el-table-column
        prop="sort"
        label="排序"
        align="center"
      ></el-table-column>
      <el-table-column prop="enabled" label="状态" align="center"
        ><template #default="{ row }">
          <el-tag>{{ row.enabled }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        :formatter="timeFormatter"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <div class="sys-table-main-actions">
            <el-link type="primary" :underline="false" @click="addClassify(row)"
              ><el-icon><Plus /></el-icon>新增</el-link
            >
            <el-link
              type="success"
              :underline="false"
              @click="onChangeMenuDialog(row)"
            >
              <el-icon><EditPen /></el-icon>修改</el-link
            >
            <el-link v-auth="'mall:category:delete'" type="danger" :underline="false" @click="onDeleteMenu(row)">
              <el-icon><Delete /></el-icon>删除
            </el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, ref } from "vue";
import { categoryList, categoryDelete } from "../api/classify";

let tableData = ref([]);
categoryList().then((res: { code: String; msg: String; data: [] }) => {
  tableData.value = res.data;
});

//单行删除
const onDeleteMenu = (row: { id: string }) => {
  categoryDelete(row.id).then(
    (res: { code: String; msg: String; data: [] }) => {
      console.log(res);
    }
  );
};
</script>

<style scoped lang="scss">
.classifyImg {
  width: 140px;
  height: 80px;
}
</style>
